<template>
  <div class="content-right-header">
    <div class="right-header-title">应用表单</div>
    <div class="right-header-search">
      <je-input
        v-model:value="paramData.name"
        placeholder="搜索"
        autocomplete="false"
        class="left-search-box"
      >
        <template #prefix>
          <i class="fal fa-search" style="padding-right: 2px"></i>
        </template>
      </je-input>
    </div>
  </div>
  <div class="right-content-box right-content-main-start">
    <div v-show="flowStartList.length > 0 && !loading" class="right-content-main-box">
      <div
        v-for="startItem in flowStartList"
        :key="startItem.name"
        class="function-item"
        @click="handldShowFunc(startItem.funcCode)"
      >
        <div
          class="item-icon"
          :style="{ backgroundColor: startItem.iconColor ? startItem.iconColor : getColor() }"
        >
          <i :class="startItem.iconCls"></i>
        </div>
        <div class="item-name">{{ startItem.name }}</div>
      </div>
    </div>
    <div v-loading="loading"></div>
    <div v-show="flowStartList.length == 0 && !loading" class="no-data-box">
      <img :src="noData" alt="" />
      <div class="no-data-explain">暂无数据～</div>
    </div>
  </div>
  <!-- <div class="right-blank-bottom"></div> -->
</template>

<script>
  import { defineComponent, reactive, toRefs, onMounted, watch, onBeforeUnmount } from 'vue';
  import { Input } from '@jecloud/ui';
  import VueEvent from '@/helper/event';
  import noData from '@/assets/no-data.png';
  import { HOME_FLOW_START_TYPE, MENU_CORE_BGCOLOR } from '@/helper/constant';
  import { showFuncForm } from '@jecloud/func';
  import { GetInitiateList } from '@/api';
  export default defineComponent({
    name: 'FlowStartMain',
    components: {
      JeInput: Input,
    },
    setup() {
      let searchTimeout = null; //名称搜索
      const state = reactive({
        noData,
        loading: false, //请求数据loading
        paramData: {
          sort: '', //分类id
          name: '', //对应名称
        },
        flowStartList: [], //流程发起列表
        arrBackground: MENU_CORE_BGCOLOR, //按钮颜色对象
      });
      const methods = {
        getFlowList() {
          //获取流程分类对应列表
          state.loading = true;
          GetInitiateList(state.paramData).then((res) => {
            if (res.code == 1000 && res.success) {
              state.flowStartList = res.data;
              setTimeout(() => {
                state.loading = false;
              }, 100);
            }
          });
        },
        changeTypeId(typeId) {
          //监听流程发起分类的变化
          state.paramData.sort = typeId;
          methods.getFlowList();
        },
        getColor() {
          var item = state.arrBackground[Math.floor(Math.random() * state.arrBackground.length)];
          return item.code || '#52C6C6';
        },
        handldShowFunc(funcCode) {
          //显示功能弹窗
          showFuncForm(funcCode, {
            beanId: '',
          });
        },
      };
      watch(
        //监测搜索名称变化
        () => state.paramData.name,
        (newVal, oldVal) => {
          if (newVal !== oldVal) {
            clearTimeout(searchTimeout);
            searchTimeout = setTimeout(() => {
              state.paramData.name = newVal;
              methods.getFlowList();
            }, 1000);
          }
        },
      );
      onMounted(() => {
        methods.getFlowList();
        VueEvent.on(HOME_FLOW_START_TYPE, methods.changeTypeId);
      });
      onBeforeUnmount(() => {
        VueEvent.off(HOME_FLOW_START_TYPE);
      });
      return {
        ...toRefs(state),
        ...methods,
      };
    },
  });
</script>
<style scoped lang="less">
  .content-right-header {
    width: 100%;
    height: 54px;
    display: inline-flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 20px;
    box-sizing: border-box;
    border-top: 1px solid #ecedf0;
    border-right: 1px solid #ecedf0;
    border-bottom: 1px solid #ecedf0;
    .right-header-title {
      font-size: 16px;
      color: #3f3f3f;
    }
    .right-header-search {
      .ant-input-affix-wrapper {
        width: 200px;
        border: 1px solid #f5f5f5;
      }
    }
  }
  .right-content-box {
    width: 100%;
    height: 540px;
    box-sizing: border-box;
    border-right: 1px solid #ecedf0;
    border-bottom: 1px solid #ecedf0;
    position: relative;
    overflow-y: auto;
    .right-content-main-box {
      width: 100%;
      display: inline-flex;
      flex-wrap: wrap;
      padding: 0 10px;
    }
    .function-item {
      width: 84px;
      margin: 20px 12px 20px;
      cursor: pointer;
      .item-icon {
        width: 40px;
        height: 40px;
        border-radius: 50%;
        margin: 0 auto;
        background-color: #f24f54;
        position: relative;
        box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
        i {
          font-size: 20px;
          color: #ffffff;
          position: absolute;
          top: 50%;
          left: 50%;
          transform: translate(-50%, -50%);
        }
      }
      .item-name {
        width: 100%;
        line-height: 20px;
        font-size: 14px;
        font-family: 'PingFang SC, PingFang SC-Normal';
        color: #333333;
        text-align: center;
        margin-top: 4px;
        overflow: hidden;
        text-overflow: ellipsis;
        -webkit-box-orient: vertical;
        display: -webkit-box;
        -webkit-line-clamp: 2;
      }
    }
  }
  .right-content-main-box::-webkit-scrollbar {
    width: 0;
    height: 0;
  }
  .right-blank-bottom {
    width: 100%;
    height: 40px;
    border-left: 1px solid #f5f5f5;
    border-right: 1px solid #f5f5f5;
    border-bottom: 1px solid #f5f5f5;
  }
  .no-data-box {
    width: 100%;
    padding-top: 140px;
    img {
      display: block;
      width: 319px;
      height: 194px;
      margin: 0 auto;
    }
    .no-data-explain {
      width: 100%;
      text-align: center;
      font-size: 14px;
      color: #a9aba9;
      padding-top: 20px;
    }
  }
</style>
